<!-- 经典布局 -->
<template>
  <el-container class="layout-classic">
    <el-container class="classic-bottom">
      <el-aside>
        <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }">
          <el-scrollbar>
            <el-menu
              :default-active="activeMenu"
              :router="false"
              :collapse="isCollapse"
              :collapse-transition="false"
              :unique-opened="true"
              background-color="#ffffff"
              text-color="#303133"
            >
              <SubMenu :menuList="menuList" />
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container class="classic-bottom-right">
        <el-header>
          <div class="header-lf">
            <!-- <div class="logo flx-center">
              <img src="@/assets/logo.svg" alt="logo" />
              <span>Lu App</span>
            </div> -->
            <ToolBarLeft />
          </div>
          <ToolBarRight />
        </el-header>
        <Main />
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup lang="ts" name="layoutClassic">
import { computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { GlobalStore } from "@/stores";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";

const route = useRoute();
const globalStore = GlobalStore();
const activeMenu = computed(() => route.path);
const isCollapse = computed(() => globalStore.themeConfig.isCollapse);
const menuList = reactive([
  {
    path: "/BigScreen",
    name: "BigScreen",
    meta: {
      icon: "HomeFilled",
      title: "首页",
    },
  },
  {
    path: "/about",
    name: "about",
    meta: {
      icon: "Notification",
      title: "关于",
    },
  },
  {
    path: "/home",
    name: "home",
    meta: {
      icon: "DocumentRemove",
      title: "Home",
    },
  },
  {
    path: "/memorandum",
    name: "memorandum",
    meta: {
      icon: "Notebook",
      title: "备忘录",
    },
  },
  {
    path: "/Table",
    name: "Table",
    meta: {
      icon: "Postcard",
      title: "表格",
    },
    children: [
      {
        path: "/table",
        name: "table",
        meta: {
          icon: "Postcard",
          title: "表格",
        },
      },
      {
        path: "/doubleTable",
        name: "doubleTable",
        meta: {
          icon: "Postcard",
          title: "二级表格",
        },
      },
    ],
  },
  {
    path: "/tabCard",
    name: "tabCard",
    meta: {
      icon: "Postcard",
      title: "卡片",
    },
  },
]);
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>

<style lang="scss">
.classic {
  .el-menu,
  .el-menu--popup {
    .el-menu-item {
      &.is-active {
        background: var(--el-color-primary-light-9);
        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          content: "";
          background: var(--el-color-primary);
        }
      }
    }
  }

  // guide
  #driver-highlighted-element-stage {
    background-color: #606266 !important;
  }
}
</style>
